<template>
  <div class="LeftTop">
    <TITLESS cnt="概览数据"> </TITLESS>
    <div class="dataBox">
      <div class="left">
        <div class="stationsCount">{{ stationCount }}</div>
        <img src="../../assets/image/yxts.png" alt="" />
        <div>运行天数</div>
      </div>

      <div class="right">
        <div class="projectTime">{{ projectTime }}</div>
        <img src="../../assets/image/fmzl.png" alt="" />
        <div>设备总数</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import TITLESS from "@/components/TITLESS.vue";
defineProps({
  stationCount: {
    type: Number,
    default: 0
  },
  projectTime: {
    type: Number,
    default: 0
  }
})

</script>

<style lang="scss" scoped>
.LeftTop {
  width: 100%;
  height: calc(100% - 45px);
  box-sizing: border-box;
  background: transparent;
  .dataBox {
    font-family: MyFont;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    flex: 1;
    box-sizing: border-box;
    img {
      width: 120px;
      height: 85px;
    }

    .left,
    .right {
      div {
        &:nth-child(1) {
          text-shadow: 0px 3px 24px rgba(0, 30, 45, 0.53);
          font-size: 48px;
          font-weight: 700;
          letter-spacing: 2px;
          line-height: 48px;
          text-align: center;
          position: relative;
          top: 23px;
          // left: 4px;
          -webkit-background-clip: text;
          color: transparent;

          animation: floats 3s infinite linear;
        }
        @keyframes floats {
          0% {
            transform: translate(0px, 0px);
          }
          50% {
            transform: translate(0px, -20px);
          }
          100% {
            transform: translate(0px, 0px);
          }
        }

        &:last-child {
          height: 29px;
          text-shadow: 0px 3px 2px rgba(0, 14, 17, 0.19);
          font-size: 16px;
          // font-size: 20px;
          font-weight: 400;
          letter-spacing: 2px;
          line-height: 40px;
          color: rgba(209, 234, 255, 1);
          text-align: center;
        }
      }
      .stationsCount {
        background: linear-gradient(
          180deg,
          rgba(12, 188, 255, 1) 0%,
          rgba(189, 236, 255, 1) 100%
        );
      }
      .projectTime {
        background: linear-gradient(
          180deg,
          rgba(0, 245, 239, 1) 0%,
          rgba(191, 255, 251, 1) 100%
        );
      }
    }
  }
}
</style>>